<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cherry.js</title>
    <script src="../../Cherry.js"></script>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .test{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app"></div>
</body>
<script>

    new CherryMain({
        app:"app",
        child:[
            new CHE_Scrollbox({
                height:300,
                width:120,
                margin:20,
                child: [
                    new CHE_Button({
                        width: "100%",
                        text:"抽屉一",
                        type:"Cherry",
                        methods:{
                            click:()=>{
                                if( $GET("#ct1").getDisplay() === "block"){
                                    $GET("#ct1").setDisplay("none");
                                }else{
                                    $GET("#ct1").setDisplay("block");
                                }

                            }
                        }
                    }),
                    new CHE_Container({
                        name:"ct1",
                        width: "100%",
                        display:"none",
                        child:[
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,1"
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,2"
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,3"
                            }),
                        ]
                    }),
                    new CHE_Button({
                        width: "100%",
                        text:"抽屉一",
                        type:"Cherry",
                        methods:{
                            click:()=>{
                                if( $GET("#ct2").getDisplay() === "block"){
                                    $GET("#ct2").setDisplay("none");
                                }else{
                                    $GET("#ct2").setDisplay("block");
                                }

                            }
                        }
                    }),
                    new CHE_Container({
                        name:"ct2",
                        width: "100%",
                        display:"none",
                        child:[
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,1"
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,2"
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,3"
                            }),
                        ]
                    }),
                    new CHE_Button({
                        width: "100%",
                        text:"抽屉一",
                        type:"Cherry",
                        methods:{
                            click:()=>{
                                if( $GET("#ct3").getDisplay() === "block"){
                                    $GET("#ct3").setDisplay("none");
                                }else{
                                    $GET("#ct3").setDisplay("block");
                                }

                            }
                        }
                    }),
                    new CHE_Container({
                        name:"ct3",
                        width: "100%",
                        display:"none",
                        child:[
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,1"
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,2"
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,3"
                            }),
                        ]
                    }),
                    new CHE_Button({
                        width: "100%",
                        text:"抽屉一",
                        type:"Cherry",
                        methods:{
                            click:()=>{
                                if( $GET("#ct4").getDisplay() === "block"){
                                    $GET("#ct4").setDisplay("none");
                                }else{
                                    $GET("#ct4").setDisplay("block");
                                }

                            }
                        }
                    }),
                    new CHE_Container({
                        name:"ct4",
                        width: "100%",
                        display:"none",
                        child:[
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,1"
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,2"
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,3",
                                type:"Info",
                            }),
                        ]
                    }),
                    new CHE_Button({
                        width: "100%",
                        text:"抽屉一",
                        type:"Cherry",
                        methods:{
                            click:()=>{
                                if( $GET("#ct5").getDisplay() === "block"){
                                    $GET("#ct5").setDisplay("none");
                                }else{
                                    $GET("#ct5").setDisplay("block");
                                }

                            }
                        }
                    }),
                    new CHE_Container({
                        name:"ct5",
                        width: "100%",
                        display:"none",
                        child:[
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,1"
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,2",
                                type:"Info",
                                methods:{
                                    click:()=>{
                                        alert("点击")
                                    }
                                }
                            }),
                            new CHE_Button({
                                width: "100%",
                                text:"抽屉一,3",
                                type:"Info",
                                methods:{
                                    click:()=>{
                                        alert("点击")
                                    }
                                }
                            }),
                        ]
                    })
                ]
            }),
        ],
        Created:()=>{

        }
    });



</script>
</html>